<template>
  <div class="main">
    <h2 class="main-index">实验四</h2>
    <p class="main-title">二阶系统的单位阶跃响应</p>
    <!-- <p class="sub-title">设一阶系统的传递函数为</p> -->
    <img class="formula" src="../assets/img/31.png" />
    <p class="sub-title">
      <span class="top">ω</span><span class="bottom">n</span> -
      无阻尼固有频率<span style="margin-left: 10px" class="top">ζ</span> -
      阻尼比
    </p>
    <p class="sub-title"></p>
    <div class="line-box">
      <p v-for="(item, index) in TArr" :key="index">
        <span>ω:{{ item }}</span>
        <span>ζ:{{ xigaArr[index] }}</span>
        <span :style="{ background: colorArr[index] }"></span>
      </p>
    </div>
    <div id="mapbox" ref="mapbox"></div>
    <van-field style="margin-bottom: 0.1rem" v-model="TNumber" type="number" center clearable placeholder="请输入无阻尼固有频率">
      <template #label>
        <p class="sub-title">
          <span class="top">ω</span><span class="bottom">n</span>
        </p>
      </template>
    </van-field>
    <van-field style="margin-bottom: 0.2rem" v-model="xiga" type="number" center clearable placeholder="请输入阻尼比">
      <template #label>
        <p class="sub-title"><span class="top">ζ</span></p>
      </template>
    </van-field>
    <div class="btn-box">
      <a href="javascript:;" @click="submit" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">提交</a>
      <a href="javascript:;" @click="showHelp" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">帮助</a>
      <a href="javascript:;" @click="run" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">仿真</a>
      <a href="javascript:;" @click="clearData" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">清除</a>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { Toast } from 'vant'
import { colorArr } from '../utils/config'
export default {
  name: "onePage",
  data() {
    return {
      TNumber: 1, // w输入值
      TArr: [], // 已提交的w值集合
      xiga: 1, // ζ输入值
      xigaArr: [], // 已提交的ζ值集合
      colorArr,
      myChart: null,
      option: null,
      yAxisType: 'category',
      yAxisArr: [0, 0.5, 1, 1.5, 2],
      xAxisArr: [0, 3, 6, 9, 12],
      seriesArr: [] // 计算后的值集合
    };
  },
  methods: {
    initChart() {
      // const tArr = [0.1];
      // const xAxisArr = [0, 0.1, 0.2, 0.3, 0.4];
      // const yAxisArr = [0, 2.5, 5, 7.5, 10];
      // const seriesArr = [];
      // const yAxisType = "category";
      const normalFontSize = 15;
      this.myChart = this.$echarts.init(document.getElementById("mapbox"));
      this.option = {
        title: {
          text: "",
        },
        tooltip: {},
        xAxis: {
          type: this.yAxisType,
          name: "{a|ω}{b|n}{c|t}",
          // max: 12,
          // min: 0,
          nameTextStyle: {
            fontSize: normalFontSize,
            rich: {
              a: {
                fontSize: 18
              },
              b: {
                fontSize: 10,
                verticalAlign: 'bottom'
              },
              c: {
                fontSize: 16,
                verticalAlign: 'bottom'
              }
            }
          },
          // splitNumber: 3,
          nameLocation: 'center',
          nameGap: '25',
          boundaryGap: false,
          data: this.xAxisArr,
          axisLabel: {
            show: true,
            fontSize: normalFontSize,
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            show: true,
            onZero: true,
            lineStyle: {
              color: "blue",
            },
          },
        },
        yAxis: {
          name: "{a|χ}{b|0}{c|(t)}",
          type: this.yAxisType,
          show: true,
          max: 2,
          min: 0,
          nameTextStyle: {
            fontSize: normalFontSize,
            formatter: '{a|w(t)/ω}{b|n}',
            rich: {
              a: {
                fontSize: 18,
                verticalAlign: 'top'
              },
              b: {
                fontSize: 9,
                verticalAlign: 'bottom'
              },
              c: {
                fontSize: 16,
                verticalAlign: 'bottom'
              }
            }
          },
          boundaryGap: false,
          data: this.yAxisArr,
          axisLabel: {
            show: true,
            fontSize: normalFontSize,
            // formatter: '{value}'
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            show: true,
            lineStyle: {
              color: "blue",
            },
          },
        },
        series: this.seriesArr
      }
      console.log(this.option)
      this.myChart.setOption(this.option);
    },
    showHelp() {
      this.$weui.alert('<p>1.本实验对二阶系统的单位阶跃响应进行仿真;</p><p>2.用户可以改变仿真系统的固有频率和阻尼比;</p><p>3.用户在同一实验中按“提交”按钮可以输入多个不同系统的固有频率和阻尼比，用户最多可更改参数的次数为5次;</p><p>4.用户按“仿真”按钮，系统进行仿真;</p><p>5.按“清除”按钮清除参数和仿真结果，可以重新输入参数和仿真。</p>', {
        title: '帮助',
        className: 'help',
        buttons: [{
          label: '确定',
          type: 'primary',
          onClick: function () { console.log('ok') }
        }]
      })
    },
    submit() {
      if (this.seriesArr.length) {
        Toast.fail('请先点击清除按钮')
        return
      }
      if (this.TArr.length >= 5) {
        return
      }
      if (!this.TNumber || this.TNumber <= 0) {
        Toast.fail('固有频率值不合法')
        return
      }
      if (!this.xiga || this.xiga < 0) {
        Toast.fail('阻尼比值不合法')
        return
      }
      this.TArr.push(Number(this.TNumber))
      this.xigaArr.push(Number(this.xiga))
    },
    clearData() {
      this.TNumber = 1
      this.TArr = []
      this.xiga = 1
      this.xigaArr = []
      // this.myChart = null
      // this.option = null
      this.yAxisType = 'category'
      this.yAxisArr = [0, 0.5, 1, 1.5, 2]
      this.xAxisArr = [0, 3, 6, 9, 12]
      this.seriesArr = []
      this.$echarts.init(this.$refs.mapbox).dispose()
      this.$nextTick(() => {
        this.initChart()
      })
    },
    drawLine(i) {
      let that = this;
      //i=9;
      var wnt = 0;
      let kt = 0;
      let kth = this.xigaArr;
      let y = 0;
      let s1 = 0, s2 = 0;
      let wn = this.TArr;
      let yArr = [];

      if (kth[i] > 0 && kth[i] < 1) {
        kt = Math.sqrt(1 - kth[i] * kth[i]);
        y = 1 - Math.exp(-kth[i] * wnt) * (Math.cos(kt * wnt) + kth[i] / kt * Math.sin(kt * wnt));
      }
      if (kth[i] == 0) {
        y = 1 - Math.cos(wnt);
      }
      if (kth[i] == 1) {
        y = 1 - (1 + wnt) * Math.exp(-wnt);
      }
      if (kth[i] > 1) {
        kt = Math.sqrt(kth[i] * kth[i] - 1);
        s1 = -(kth[i] + kt);
        s2 = -(kth[i] - kt);
        y = 1 + 0.5 * wn[i] / kt * (Math.exp(s1 * wnt) / (-s1 * wn[i]) - Math.exp(s2 * wnt) / (-s2 * wn[i]));
      }

      while (wnt <= 14) {
        wnt = wnt + 12 * 0.025 / 8;
        if (kth[i] > 0 && kth[i] < 1) {
          kt = Math.sqrt(1 - kth[i] * kth[i]);
          y = 1 - Math.exp(-kth[i] * wnt) * (Math.cos(kt * wnt) + kth[i] / kt * Math.sin(kt * wnt));
        }
        if (kth[i] == 0) {
          y = 1 - Math.cos(wnt);
        }
        if (kth[i] == 1) {
          y = 1 - (1 + wnt) * Math.exp(-wnt);
        }
        if (kth[i] > 1) {
          kt = Math.sqrt(kth[i] * kth[i] - 1);
          s1 = -(kth[i] + kt);
          s2 = -(kth[i] - kt);
          y = 1 + 0.5 * wn[i] / kt * (Math.exp(s1 * wnt) / (-s1 * wn[i]) - Math.exp(s2 * wnt) / (-s2 * wn[i]));
        }
        yArr.push([wnt, y])



        console.log('i', i, y, s1, s2, kt, wnt)


      }
      that.seriesArr.push({
        data: yArr,
        type: "line",
        showSymbol: false,
        smooth: true,
        lineStyle: {
          color: that.colorArr[i],
        },
        // markLine: {
        //   show: false,
        //   silent: true,
        //   data: [[
        //     {
        //       name: '',
        //       xAxis: 0,
        //       yAxis: 1
        //     },
        //     {
        //       xAxis: 12,
        //       yAxis: 1
        //     }
        //   ]],
        //   lineStyle: {
        //     normal: {
        //       type: 'dashed'
        //     }
        //   }
        // }
      })



    },
    run() {
      const that = this
      if (this.seriesArr.length) {
        Toast.fail('请先点击清除按钮')
        return
      }
      if (this.TArr.length < 1) {
        Toast.fail('请先提交T值')
        return
      }

      for (let jk = 0; jk < this.TArr.length; jk = jk + 1) {
        that.drawLine(jk);
      }

      // 根据输入T的最大值设置横坐标
      // this.xAxisArr = []
      // let TArrMap = (JSON.parse(JSON.stringify(this.TArr))).sort()
      // const maxT = TArrMap[TArrMap.length - 1]
      // for(let i=0;i<5;i++) {
      //   this.xAxisArr.push((maxT * i).toFixed(2))
      // }
      // const xArr = []
      // for(let i=0;i<121;i++){
      //   xArr.push(i/10)
      // }
      // // 计算每个T值的线条数据
      // this.TArr.forEach((item, index) => {
      //   const xigaValue = that.xigaArr[index]
      //   let lineData = []
      //   if(xigaValue === 0) {
      //     xArr.forEach((child) => {
      //       lineData.push([item*child, 1 - Math.cos(item * child)])
      //       // return 1 - Math.cos(item * child)
      //     })
      //   } else if(xigaValue>0 && xigaValue<1) {
      //     const wd = item * Math.sqrt(1 - Math.pow(that.xigaArr[index], 2))
      //     xArr.forEach((child) => {
      //       lineData.push([item*child, 1 - Math.pow(Math.E, -that.xigaArr[index]*item*child) * (1 / Math.sqrt(1 - Math.pow(that.xigaArr[index], 2))) * Math.sin(wd*child + Math.atan((Math.sqrt(1-Math.pow(xigaValue, 2)))/xigaValue))])
      //     })
      //   } else if(xigaValue === 1) {
      //     xArr.forEach((child) => {
      //       lineData.push([item*child, 1 - (1 + item*child) * Math.pow(Math.E, -item*child)]) 
      //     })
      //   } else {
      //     xArr.forEach((child) => {
      //       const s1 = - (xigaValue + Math.sqrt(Math.pow(xigaValue, 2) - 1)) * item
      //       const s2 = - (xigaValue - Math.sqrt(Math.pow(xigaValue, 2) - 1)) * item
      //       lineData.push([item*child, 1 + (item / (2 * Math.sqrt(Math.pow(xigaValue, 2) - 1))) * ((Math.pow(Math.E, s1 * child))/(-s1) - (Math.pow(Math.E, s2 * child))/(-s2))])
      //     })
      //   }
      //   that.seriesArr.push({
      //     data: lineData,
      //     type: "line",
      //     showSymbol: false,
      //     smooth: true,
      //     lineStyle: {
      //       color: that.colorArr[index],
      //     },
      //     markLine: {
      //       silent: true,
      //       data: [[
      //           {
      //               name: '',
      //               xAxis: 0,
      //               yAxis: 1
      //           },
      //           {
      //               xAxis: 12,
      //               yAxis: 1
      //           }
      //       ]],
      //       lineStyle: {
      //           normal: {
      //               type: 'dashed'
      //       }
      //     }
      //     }
      //   })
      // })

      this.yAxisType = 'value'
      console.log(this.option)
      this.$echarts.init(this.$refs.mapbox).dispose()
      this.myChart.dispose()
      // this.myChart.setOption(this.option)
      this.$nextTick(() => {
        this.initChart()
      })
    }
  },
  mounted() {
    this.initChart();
  },
};
</script>

<style scoped>
.formula {
  height: auto;
  width: 100%;
  margin-bottom: 5px;
}

.line-box p {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.line-box p span:first-child,
.line-box p span:nth-child(2) {
  color: #333;
  width: 12vw;
  overflow: hidden;
  line-height: 0.4rem;
  font-size: 0.45rem;
  margin-right: 12px;
}

.line-box p span:last-child {
  width: 10vw;
  height: 4px;
  display: inline-block;
}
</style>